<template lang="pug">
  div#Search
    div.top-header
      input.iconfont.search-input(type="text",:placeholder="placeholderText")
      span.search-cancel(@click="$router.push('/')")  取消
    template(v-for="columnItem in columnData")
      div.column-title {{columnItem.columnTitle}}
      div.column(v-for="item in columnItem.columnList")
        img(:src="item.columnImg")
        div.title-bar
          span.title  {{item.columnText}}
          span.share-block
            i.iconfont.icon-fenxiang
          span.like-block(:class="[item.ifLike ? 'highLight' : '']")
            i.iconfont(:class="[item.ifLike ? 'icon-xihuan-tianchong' : 'icon-xihuan']")
            span.like-number {{item.likeNumber}}

</template>
<script>
  export default {
    data() {
      return {
        placeholderText: '\ue60b 请输入挑战或文章的名称',
        columnData: [{
          columnTitle: '挑战',
          columnList: [{
            columnImg: require('@/assets/search/column01.png'),
            columnText: '夜跑100天',
            likeNumber: 12,
            ifLike: false
          }]
        }, {
          columnTitle: '文章',
          columnList: [{
            columnImg: require('@/assets/search/column02.png'),
            columnText: '发现身边的美',
            likeNumber: 65,
            ifLike: true
          }, {
            columnImg: require('@/assets/search/column03.png'),
            columnText: '发现身边的美',
            likeNumber: 65,
            ifLike: false
          }]
        }]
      }
    }
  }
</script>
<style scoped lang="less">
  #Search {
    .top-header {
      position: relative;
      .search-input {
        position: absolute;
        width: calc(100% - 90px);
        height: 25px;
        background: #f5f5f5;
        top: 12.5px;
        border: none;
        left: 20px;
        text-indent: 10px;
        outline: none;
        font-size: 12px;
        color: #9c9c9c;
      }
      .search-cancel {
        position: absolute;
        right: 20px;
      }
    }
    .column-title {
      text-align: left;
      padding: 15px 20px 8px 20px;
      color: #9c9c9c;
    }
  }
</style>
